<template>
    <!-- 修改资料 -->

    <div>
                <el-form label-width="70px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="编号" prop="number" class="borderNone">
                                <el-input v-model="form.number"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="form.name" class="borderNone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="上级类别" prop="parentName">
                                <el-input v-model="form.parentName" class="borderNone"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="状态" prop="status" >
                                <el-radio-group v-model="form.status"  style="margin-top: -4px;">
                                    <el-radio label="normal" size="large">启用</el-radio>
                                    <el-radio label="disable" size="large">停用</el-radio>
                                </el-radio-group>
                             </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" class="borderNone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="button-position">
                    <el-button @click="updateVisible">取 消</el-button>
                </div>
    </div>
</template>

<script setup>
import { reactive, ref,onMounted } from 'vue';
import Api from '@/api/model/meta'
const emit = defineEmits(['updatetable'])

const visible = ref(true)
// 添加用户数据的对象
const form = ref({
});
const formRef = ref()
const formRules = reactive({
})
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})  

onMounted(() => {
    getInit()
})

const updateVisible = () => {
    emit('updatetable')
}


const getInit = async () => {
    let res = await Api.Catalog.detail.post(props.paramsData);
    form.value = res.data
}


</script>

<style lang="less" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
    background-color: transparent; //背景颜色透明
    border-bottom: 1px solid #999;
    border-radius: 0;

    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>

